<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no, email=no" />
    <meta charset="UTF-8">
    <title>优购优品网</title>
    <!-- <link rel="stylesheet" href="../css/themes/css/core.css">
    <link rel="stylesheet" href="../css/themes/css/icon.css">
    <link rel="stylesheet" href="../css/themes/css/home.css"> -->
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <link rel="stylesheet" type="text/css" href="../css/local.css" />
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>

    <style>
        .van-sidebar-item {
            padding: 13px 0 13px 9px;
        }

        .van-sidebar-item--select {
            color: #ee0a24;
            width: 90px;
        }

        .left {
            width: 90px;
            height: 100%;
            overflow-y: auto;
            background: #f8f8f8;
        }

        .right {
            position: absolute;
            left: 90px;
            right: 0;
            top: 0;
            height: 100%;
            padding-right: 5px;
            background: #fff;
        }

        .right>div {
            height: 100%;
            overflow: hidden;
        }

        .right .row {
            position: relative;
        }

        .right .row .img {
            width: 100px;
            height: 90px;
            border-radius: 4px;
            overflow: hidden;
        }

        .right .row .img img {
            width: 100%;
            height: 100%;
        }

        .right .row .desc {
            position: absolute;
            top: 0;
            left: 100px;
            right: 0;
            bottom: 0;
            padding-left: 5px;
        }

        .right .row .desc .title {
            font-size: 14px;
            height: 40px;
            line-height: 20px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        .right .row .desc .title .hot {
            color: #fff;
            background: #cd1b21;
            font-size: 12px;
            border-radius: 2px;
            margin-right: 5px;
            display: inline-block;
            line-height: 16px;
            padding: 0 2px;
            vertical-align: middle;
        }

        .tag {
            position: relative;
            overflow: hidden;
        }

        .tag>div {
            transform: scale(0.8);
            -webkit-transform-origin-x: 0;
            overflow: hidden;
            width: 128%;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .tag span {
            color: #cd1b21;
            border: 1px solid #ff6e73;
            font-size: 12px;
            border-radius: 2px;
            display: inline-block;
            line-height: 16px;
            padding: 0 2px;
            vertical-align: middle;
            margin-right: 4px;
            margin-bottom: 4px;
        }

        .van-cell {
            padding-right: 5px;
        }


        .right .row .desc .sub-title {
            font-size: 12px;
            color: #969799;
            line-height: 20px;
            height: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .right .row .desc .sub-title * {
            vertical-align: middle;
        }

        .banner {
            padding: 10px 10px 0 10px;

        }

        .banner>div {
            border-radius: 6px;
            overflow: hidden;
            /* background: #fdabab; */
        }

        .banner img {
            width: 100%;
        }

        .price {
            color: #cd1b21;
            font-size: 18px;
        }

        .van-popup {
            width: 70%;
            height: 100%;
        }

        .van-popup .filter-list {
            height: calc(100% - 44px);
            padding: 80px 0 20px 10px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        .van-popup .filter-txt {
            line-height: 42px;
        }

        .van-popup .van-row {
            border-bottom: 1px solid #ebedf0;
            padding-bottom: 5px;
        }

        .van-popup .filter-condition {
            height: 26px;
            line-height: 26px;
            width: 80%;
            margin-bottom: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .van-search__content {
            border: 1px solid #cd1b21;
        }

        .van-search {
            background: transparent !important;
            padding: 0;
        }

        .van-nav-bar__title {
            margin: 0 110px 0 50px;
            max-width: none;
        }

        .van-nav-bar__left {
            height: 46px;
        }

        .head-right {
            height: 46px;
        }

        .type {
            text-align: center;
            font-size: 12px;
            color: #424242;
        }

        .type img {
            height: 80px;
        }

        .mb {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            padding: 0 15px;
            font-size: 13px;
            color: #9e9e9e;
            height: 40px;
            line-height: 40px;
            background: #fff;
            z-index: 99;
        }

        .mb span {
            color: #cd1b21;
        }

        .sq-m{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background:rgba(255,255,255,0.5);
        }
        .sq{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
        .sq img{
            position: absolute;
            left: 0;
            top: 0;
            width: 30px!important;
            height: 30px!important;
        }
    </style>

</head>

<body>
    <div id="app" v-cloak>
        <div class="init-full">

            <van-nav-bar class="head head-index" :left-arrow="form != 'base'" @click-left="onClickLeft">
                <div slot="title" style="margin-top: 10px;">
                    <form action="" style="margin-top:-3px;">
                        <van-search placeholder="输入编码、品牌、品类、名称搜索" v-if="detailTypeList.length"
                            v-model="detailTypeList[activeKey].keyName" shape="round"
                            @search="getFilterList(detailTypeList[activeKey])">
                        </van-search>
                    </form>
                </div>
                <div slot="right">
                    <div class="head-right">
                        <van-icon name="shopping-cart-o" size="20px" @click="openCart"></van-icon>
                        <span @click="detailTypeList[activeKey].showFilter = true">筛选</span>
                    </div>
                </div>
            </van-nav-bar>

            <div class="body-no-bottom">
                <div class="content">

                    <div class="left">
                        <van-sidebar v-model="activeKey">
                            <van-sidebar-item :title="row.Name" v-for="row in detailTypeList" @click="toggleItem(row)">
                            </van-sidebar-item>
                        </van-sidebar>
                    </div>
                    <div class="right">

                        <div v-for="(row,index) in detailTypeList" v-show="index == activeKey">
                            <div class="mb" v-if="row.typeNode.length && row.isFinal">
                                <span @click="returnBefore(row)">{{row.Name}}&nbsp;</span>/
                                <span v-if="row.selectTypeIndex == -1">&nbsp;搜索结果</span>
                                <span
                                    v-if="row.selectTypeIndex != -1">&nbsp;{{row.typeNode[row.selectTypeIndex].Name}}</span>
                            </div>


                            <div class="type" v-if="!row.isFinal">
                                <van-row>
                                    <van-col :span="8" v-for="(typeItem,typeIndex) in row.typeNode">
                                        <div @click="clickTypeHandler(row,typeItem,typeIndex)">
                                            <div><img :src="shoppingMallServerIP + typeItem.Icon" /></div>
                                            <div>{{typeItem.Name}}</div>
                                        </div>

                                    </van-col>
                                </van-row>
                            </div>
                            <div v-if="row.isFinal" style="height: 100%;overflow: hidden;"
                                :style="{'padding-top':row.typeNode.length?'40px':'0'}">
                                <van-pull-refresh :disabled="row.loadingDisabled" v-model="row.refreshLoading"
                                    @refresh="onRefresh(row)">
                                    <div style="height: 100%;overflow-y: auto;" onscroll="listScroll(this)">
                                        <!-- <div style="height: 40px;" v-if="row.typeNode.length"></div> -->
                                        <van-list v-model="row.listLoading" :finished="row.listFinished"
                                            finished-text="没有更多了" @load="listOnLoad(row)">
                                            <div>
                                                <div class="banner">
                                                    <van-swipe :autoplay="3000" indicator-color="white">
                                                        <van-swipe-item v-if="row.Notes1">
                                                            <div v-html="row.Notes1"></div>
                                                        </van-swipe-item>
                                                        <van-swipe-item v-if="row.Notes2">
                                                            <div v-html="row.Notes2"></div>
                                                        </van-swipe-item>
                                                        <van-swipe-item v-if="row.Notes3">
                                                            <div v-html="row.Notes3"></div>
                                                        </van-swipe-item>

                                                        <div slot="indicator"></div>
                                                    </van-swipe>
                                                </div>
                                                <van-cell v-for="item in row.node" @click="intoDetail(item)">
                                                    <div class="row">
                                                        <div class="img">
                                                            <img v-lazy="shoppingMallServerIP + item.ThumbnailUrl160" />
                                                        </div>
                                                        <div class="desc">
                                                            <div class="title"><span
                                                                    class="hot">{{item.BrandName}}</span>{{item.ProductName}}
                                                            </div>
                                                            <div class="tag">
                                                                <div>
                                                                    <span v-for="tagItem in getTagArray(item)"
                                                                        v-if="tagItem && tagItem.indexOf('套餐') == -1">{{tagItem}}</span>
                                                                </div>

                                                            </div>
                                                            <div class="price">
                                                                <span style="font-size: 12px;"
                                                                    v-show="userInfo">￥</span><span
                                                                    v-show="userInfo">{{item.SalePrice}}</span>
                                                                <span
                                                                    style="font-size: 12px;color: #9e9e9e;">{{item.VistiCounts}}人浏览过</span>
                                                            </div>
                                                        </div>
                                                        <div class="sq-m" v-if="item.Stock <= 0">
                                                            <div class="sq"><img src="../image/sq.png" /></div>
                                                        </div>
                                                    </div>
                                                </van-cell>
                                            </div>
                                        </van-list>
                                    </div>

                                </van-pull-refresh>
                            </div>


                            <van-popup v-model="row.showFilter" position="right" :overlay="true" :lazy-render="false"
                                :overlay-style="{'position':'fixed','left':0}">
                                <div class="filter-list">
                                    <div class="filter-txt">品牌</div>
                                    <div>
                                        <van-row>
                                            <van-col span="8" v-for="(item,index) in brands">
                                                <van-button size="mini" class="filter-condition"
                                                    :type="getFilterColor(item.Value,row.brandId)"
                                                    @click="toggleFilter(item.Value,'brandId',row)">{{item.Name}}
                                                </van-button>
                                            </van-col>
                                        </van-row>
                                    </div>
                                    <div class="filter-txt">标签</div>
                                    <div>
                                        <van-row>
                                            <van-col span="8" v-for="(item,index) in tags"
                                                v-if="item.Name.indexOf('套餐') == -1">
                                                <van-button size="mini" class="filter-condition"
                                                    :type="getFilterColor(item.Value,row.tagId)"
                                                    @click="toggleFilter(item.Value,'tagId',row)">
                                                    {{item.Name}}</van-button>
                                            </van-col>
                                        </van-row>
                                    </div>
                                </div>
                                <div>
                                    <van-button type="primary" block style="border-radius: 0;"
                                        @click="getFilterList(row)">筛选
                                    </van-button>
                                </div>
                            </van-popup>
                        </div>



                    </div>

                </div>
                <van-loading v-if="showLoading" />
            </div>

        </div>
    </div>



</body>
<script type="text/javascript">
    var vm;


    function listScroll(that) {
        if ($(that).scrollTop() == 0) {
            vm.detailTypeList[vm.activeKey].loadingDisabled = false;
        } else {
            vm.detailTypeList[vm.activeKey].loadingDisabled = true;
        }
    }


    apiready = function () {
        //$('.init-full').show();

        var form = api.pageParam.form || '';


        api.addEventListener({
            name: 'keyback'
        }, function (ret, err) {
            vm.keybackEvent();
        });


        api.addEventListener({
            name: 'refreshAboutUser'
        }, function (ret, err) {
            vm.userInfo = FLD.getUserInfo();
        });

        var detailTypeList = api.pageParam.detailTypeList;
        for (var i in detailTypeList) {
            detailTypeList[i].listLoading = false;
            detailTypeList[i].listFinished = true;
            detailTypeList[i].loadingDisabled = false;
            detailTypeList[i].refreshLoading = false;
            detailTypeList[i].pageIndex = 1;
            detailTypeList[i].pageSize = 20;
            detailTypeList[i].nextTypeNode = [];
            detailTypeList[i].node = [];
            detailTypeList[i].keyName = '';
            detailTypeList[i].brandId = 0;
            detailTypeList[i].tagId = 0;
            detailTypeList[i].showFilter = false;
            detailTypeList[i].isFinal = false;
            detailTypeList[i].selectTypeIndex = -1;
        }

        Vue.use(vant.Lazyload, {
            loading: '../image/no.png',
            error: '../image/no.png'
        });

        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                serverIP: 'http://' + FLD.serverIP,
                shoppingMallServerIP: 'http://' + FLD.shoppingMallServerIP,
                form: form,
                activeKey: 0,
                detailTypeList: detailTypeList,
                types: [],
                brands: [],
                tags: [],
                userInfo: FLD.getUserInfo() || ''
            },
            created: function () {
                var that = this;

                var appTop = parseInt(window.localStorage.getItem('safeAreaTop'));

                if (appTop) {
                    $('.head-index').css({
                        'padding-top': appTop + 'px',
                        'height': appTop + 50 + 'px',
                        'line-height': '40px'
                    })
                }
                that.getTypes();
                that.getBrands();
                that.getTags();
                that.toggleItem(that.detailTypeList[0]);

            },
            methods: {

                openCart() {
                    var that = this;
                    FLD.mustLogin(function () {
                        api.openWin({
                            name: 'shoppingCart',
                            url: 'shoppingCart.html',
                            reload: true,
                            slidBackEnabled: false
                        })
                    })
                },
                getTypes() {
                    var that = this;
                    FLD.ajax('sp_allProductType', {}, function (res) {
                        that.types.push({
                            Name: '所有',
                            Value: 0
                        })
                        for (var i in res.ds) {
                            if (res.ds[i].ParentCategoryId == 0) {
                                that.types.push({
                                    Name: res.ds[i].Name,
                                    Value: res.ds[i].CategoryId
                                })
                            }

                        }
                    })
                },
                getBrands() {
                    var that = this;
                    FLD.ajax('sp_getBrand', {}, function (res) {
                        that.brands.push({
                            Name: '所有',
                            Value: 0
                        })
                        for (var i in res.ds) {
                            that.brands.push({
                                Name: res.ds[i].BrandName,
                                Value: res.ds[i].BrandId
                            })

                        }
                    })
                },
                getTags() {
                    var that = this;
                    FLD.ajax('sp_productTags', {}, function (res) {
                        that.tags.push({
                            Name: '所有',
                            Value: 0
                        })
                        for (var i in res.ds) {
                            that.tags.push({
                                Name: res.ds[i].TagName,
                                Value: res.ds[i].TagID
                            })

                        }
                    })
                },
                getFilterColor(name, value) {
                    var that = this;
                    if (name == value) {
                        return 'primary';
                    } else {
                        return 'default';
                    }
                },
                toggleFilter(name, value, row) {
                    var that = this;
                    row[value] = name;
                },
                onRefresh(row) {
                    var that = this;
                    row.refreshLoading = true;
                    if (row.typeNode.length) {
                        if (row.selectTypeIndex == -1) {
                            that.getFilterList(row);
                        } else {
                            that.clickTypeHandler(row, row.typeNode[row.selectTypeIndex], row.selectTypeIndex);
                        }

                    } else {
                        row.listFinished = true;
                        that.toggleItem(row);
                    }

                },
                toggleItem(row) {
                    var that = this;

                    if (!row.typeNode.length && !row.node.length || row.refreshLoading) {
                        that.showLoading = true;

                        row.isFinal = true;
                        row.pageIndex = 1;
                        var obj = {
                            keyName: row.keyName,
                            categoryId: row.CategoryId,
                            brandId: row.brandId,
                            tagId: row.tagId,
                            pageIndex: row.pageIndex,
                            pageSize: row.pageSize
                        }
                        FLD.ajax('sp_searchProducts', obj, function (res) {
                            that.showLoading = false;
                            row.refreshLoading = false;
                            row.listFinished = false;
                            row.node = res.ds;
                        })
                    }

                },
                clickTypeHandler(row, typeItem, typeIndex) {
                    var that = this;
                    that.showLoading = true;
                    row.isFinal = true;
                    row.selectTypeIndex = typeIndex;
                    row.pageIndex = 1;
                    var obj = {
                        keyName: row.keyName,
                        categoryId: typeItem.CategoryId,
                        brandId: row.brandId,
                        tagId: row.tagId,
                        pageIndex: row.pageIndex,
                        pageSize: row.pageSize
                    }
                    FLD.ajax('sp_searchProducts', obj, function (res) {
                        that.showLoading = false;
                        row.refreshLoading = false;
                        row.listFinished = false;
                        row.node = res.ds;
                    })

                },
                listOnLoad(row) {
                    var that = this;
                    row.pageIndex++;
                    var obj = {
                        keyName: row.keyName,
                        categoryId: row.selectTypeIndex == -1 ? row.CategoryId : row.typeNode[row.selectTypeIndex].CategoryId,
                        brandId: row.brandId,
                        tagId: row.tagId,
                        pageIndex: row.pageIndex,
                        pageSize: row.pageSize
                    }
                    FLD.ajax('sp_searchProducts', obj, function (res) {
                        row.listLoading = false;
                        if (res.ds.length == 0) {
                            row.listFinished = true;
                        }
                        row.node = row.node.concat(res.ds);
                    })
                },
                returnBefore(row) {
                    var that = this;
                    row.node = [];
                    row.keyName = '';
                    row.pageIndex = 1;
                    row.selectTypeIndex = -1;
                    row.isFinal = false;
                },
                getFilterList(row) {
                    var that = this;
                    that.showLoading = true;
                    row.showFilter = false;
                    row.isFinal = true;
                    row.pageIndex = 1;
                    var obj = {
                        keyName: row.keyName,
                        categoryId: row.selectTypeIndex == -1 ? row.CategoryId : row.typeNode[row.selectTypeIndex].CategoryId,
                        brandId: row.brandId,
                        tagId: row.tagId,
                        pageIndex: row.pageIndex,
                        pageSize: row.pageSize
                    }
                    FLD.ajax('sp_searchProducts', obj, function (res) {
                        that.showLoading = false;
                        row.refreshLoading = false;
                        row.listFinished = false;
                        row.node = res.ds;
                    })
                },
                getTagArray(item) {
                    var that = this;
                    if (!item.TagNames) {
                        return [];
                    } else {
                        return item.TagNames.split(',');
                    }
                },
                intoDetail(row) {
                    var that = this;
                    api.openWin({
                        name: 'product',
                        url: 'product.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: {
                            productData: row,
                            stepIndex: 1
                        }
                    })
                },
                keybackEvent() {
                    var that = this;
                    if (that.detailTypeList[that.activeKey].typeNode.length && that.detailTypeList[that.activeKey].isFinal) {
                        that.returnBefore(that.detailTypeList[that.activeKey]);
                    } else {
                        api.closeWin();
                    }
                },
                onClickLeft() {
                    var that = this;
                    that.keybackEvent();
                }
            }
        })
    };
</script>

</html>